<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <div
        class="ma-content-block lg:flex justify-between p-4"
        style="background: #fff"
    >
        <!-- CRUD 组件 -->
        <ma-crud
            :options="crud"
            :columns="columns"
            ref="crudRef"
            @selection-change="selectChange"
        >
            <!-- 表格操作按钮扩展 -->
            <template #tableButtons>
                <a-button
                    @click="operate('optimize')"
                    type="primary"
                    status="success"
                    v-auth="['system:dataMaintain:optimize']"
                >
                    <template #icon><icon-tool /></template>优化表
                </a-button>

                <a-button
                    @click="operate('clear')"
                    type="primary"
                    status="success"
                    v-auth="['system:dataMaintain:fragment']"
                >
                    <template #icon><icon-experiment /></template>清理碎片
                </a-button>
            </template>
            <!-- 操作 -->
            <template #operationCell="{ record }">
                <a-link @click="tableStruct(record.name)">
                    <icon-eye /> 查看
                </a-link>
            </template>
        </ma-crud>

        <a-modal v-model:visible="visible" width="900px" :footer="false">
            <template #title>表结构数据</template>
            <ma-crud
                ref="tableRef"
                :options="tableCrud"
                :columns="[
                    { title: '字段名称', dataIndex: 'column_name' },
                    { title: '字段类型', dataIndex: 'column_type' },
                    { title: '字段注释', dataIndex: 'column_comment' }
                ]"
            />
        </a-modal>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import dataMaintain from '@/api/system/dataMaintain';
import { Message } from '@arco-design/web-vue';

const crudRef = ref();
const tableRef = ref();
const selecteds = ref([]);
const currentTable = ref('');
const visible = ref(false);

const selectChange = (val) => (selecteds.value = val);

const operate = async (op) => {
    if (selecteds.value.length === 0) {
        Message.error('至少要选择一条数据');
        return;
    }
    let response;
    if (op === 'optimize') {
        response = await dataMaintain.optimize(selecteds.value);
    }

    if (op === 'clear') {
        response = await dataMaintain.fragment(selecteds.value);
    }

    response.success && Message.success(response.message);
};

const tableStruct = (name) => {
    tableCrud.requestParams.table = name;
    visible.value = true;
    tableRef.value.requestData();
};

const crud = reactive({
    api: dataMaintain.getPageList,
    searchColNumber: 2,
    pageLayout: 'fixed',
    showIndex: false,
    rowSelection: { showCheckedAll: true, key: 'name' },
    operationColumn: true,
    operationColumnWidth: 100
});

const columns = reactive([
    { title: '表名称', dataIndex: 'name', search: true, width: 200 },
    { title: '表引擎', dataIndex: 'engine', width: 150 },
    { title: '总行数', dataIndex: 'rows', width: 150 },
    { title: '碎片大小', dataIndex: 'data_free', width: 150 },
    { title: '数据大小', dataIndex: 'data_length', width: 150 },
    { title: '索引大小', dataIndex: 'index_length', width: 150 },
    { title: '字符集', dataIndex: 'collation', width: 180 },
    { title: '创建时间', dataIndex: 'create_time', width: 180 },
    { title: '表注释', dataIndex: 'comment', width: 180 }
]);

const tableCrud = reactive({
    api: dataMaintain.getDetailed,
    requestParams: {},
    autoRequest: false,
    showTools: false
});
</script>

<script>
export default { name: 'system:dataMaintain' };
</script>

<style scoped></style>
